<template>
	<view class="login">
		<view class="login_header">
			<view class="login_header_title">
				{{form_title[type]}}账号
			</view>
			<view class="login_header_desc">
				欢迎使用批量归属查询~
			</view>
		</view>

		<view class="login_form">
			<view class="login_form_item">
				<view class="login_form_item_icon">
					<rui-icons icon="user"></rui-icons>
				</view>
				<input type="text" v-model="form.username" class="login_form_item_input" placeholder="请输入用户名">
			</view>
			<view class="login_form_item">
				<view class="login_form_item_icon">
					<rui-icons icon="password"></rui-icons>
				</view>
				<input type="password" v-model="form.password" class="login_form_item_input" placeholder="请输入密码">
			</view>
			<view class="login_form_item" v-if="type == 'register'">
				<view class="login_form_item_icon">
					<rui-icons icon="password"></rui-icons>
				</view>
				<input type="password" v-model="form.confirm" class="login_form_item_input" placeholder="请输入密码">
			</view>
			<view class="login_form_item">
				<button class="login_form_item_btn" @click="submit">{{form_title[type]}}</button>
			</view>
			<view class="login_form_item">
				<view class="login_form_item_text" @click="onTab('register')" v-if="type == 'login'">
					还没有账号，去注册！
				</view>
				<view class="login_form_item_text" @click="onTab('login')" v-else>
					我有账号，去登录！
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		apiUserLogin,
		apiUserRegister
	} from "@/common/api.js"
	import Push from "@/util/push.js"
	import {
		userStore
	} from "@/store/index.js"
	
	const user = userStore();
	const push = new Push();
	
	let type = ref('login');

	let form = ref({
		username: "",
		password: "",
		promo: uni.getStorageSync('PROMO') || "not"
	})

	let form_title = ref({
		login: "登录",
		register: "注册"
	})

	const submit = () => {
		if (form.value.username.length < 2) {
			uni.$rui.toast('用户名不能少于2位');
			return;
		}

		if (form.value.password.length < 6) {
			uni.$rui.toast('密码不能少于6位');
			return;
		}
		uni.showLoading({
			title: "登录中"
		})
		if (type.value == 'login') {
			apiUserLogin(form.value).then(success);
		}
		if (type.value == 'register') {
			if (form.value.password != form.value.confirm) {
				uni.$rui.toast('两次密码不一样');
				return;
			}

			apiUserRegister(form.value).then(success);
		}
	}

	const success = res => {
		user.setUser(res.data.user);
		user.setMsg(res.data.msg);
		
		uni.showToast({
			title: "登录成功",
			success() {
				push.start()
				uni.hideLoading()
				setTimeout(() => {
					uni.$rui.route('/pages/index/index')
				}, 1500)
			}
		})
		
	}

	const onTab = (e) => {
		type.value = e;
		form.value.username = ""
		form.value.password = ""
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 80rpx 30rpx 0;
		position: relative;
		overflow: hidden;

		&::before {
			content: "";
			display: block;
			width: 300rpx;
			height: 300rpx;
			position: absolute;
			top: -100rpx;
			right: -130rpx;
			background: var(--color);
			border-radius: 50%;
			z-index: 1;
		}

		&::after {
			content: "";
			display: block;
			width: 350rpx;
			height: 350rpx;
			position: absolute;
			top: -80rpx;
			right: -200rpx;
			background: #d6e9ff;
			border-radius: 50%;
		}

		&_form {
			margin-top: 200rpx;

			&_item {
				position: relative;
				margin-top: 50rpx;

				&_btn {
					background: var(--color);
					border-radius: 50rpx;
					color: #fff;
				}

				&_icon {
					position: absolute;
					top: 25rpx;
					left: 30rpx;
				}

				&_input {
					background: #fff;
					padding: 25rpx 20rpx 25rpx 80rpx;
					border-radius: 50rpx;
				}
			}
		}

		&_header {
			&_title {
				font-size: 45rpx;
				font-weight: bold;
				color: var(--color);
			}

			&_desc {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>